<template>
  <view class="page">
    <!-- 标题栏  start-->
      <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
        <block slot="content">收益明细</block>
        <block slot="right">
          <!-- <view class="cuIcon-calendar text-theme2" style="font-size: 36rpx" @click="showCalendar"></view> -->
        </block>
      </fu-custom>
    <!-- 标题栏  end -->
	<!-- <view class="flex padding-24 justify-end bg-white" @click="showCalendar">
		<image src="https://localelife.chunchuangkeji.cn/h5img/images/027.png"  class="fu-block-32"/>
	</view> -->
	<view class="flex solid-bottom padding-tb-12 bg-white flex-wrap" style="padding: 0 64rpx;margin: 24rpx;border-radius: 16rpx;">
		<view class="flex" style="width: 100%;">
			<view class="flex flex-direction margin-tb-16 flex-sub">
				<view class="text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{moneyInfo.total_money || 0}}</text></view>
				<view class="item-title text-666 fu-fs32">总金币</view>
			</view>
			<view class="flex flex-direction margin-tb-16 flex-sub" v-if="identity_type == 1">
				<view class="text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{recommends || 0}}</text></view>
				<view class="item-title text-666 fu-fs32">发展下线</view>
			</view>
		</view>
		<view class="margin-tb-16 flex" style="width: 100%;">
			<view class="flex flex-direction" style="width: 50%;">
				<view class="text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{moneyInfo.no_settle_money || 0}}</text></view>
				<view class="item-title text-666 fu-fs32">待结算</view>
			</view>
			<view class="flex flex-direction" style="width: 50%;">
				<view class="text-666"><text style="color: #333; font-weight: bold; font-size: 44rpx;">{{moneyInfo.settle_money || 0}}</text></view>
				<view class="item-title text-666 fu-fs32">已结算</view>
			</view>
		</view>
	</view>
    <view style="height: 82rpx;padding: 0 24rpx;" >
		<scroll-view scroll-x class="bg-white nav">
		  <view class="flex text-center">
		    <view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub" :class="{ cur: tabCurrentIndex === index }" @click="tabClick(item, index)">
		      {{ item.text || '' }}
		      <view class="active-line"></view>
		    </view>
		  </view>
		</scroll-view>
    </view>

    <!-- 导航栏 end -->
    <view class="margin-top-xl" v-if="isShowLoading"><fu-loading></fu-loading></view>
    <!-- 订单列表 start -->
	<block v-else>
		<view class="flex align-center">
			<view class="data-wrap flex justify-start align-center" @click="showCalendar">
			   <view class="data-start data-box flex justify-between align-center">
			     <view class="data-time text-333 text-sm">
			       {{start_data ? start_data : '开始日期'}}
			     </view>
			     <view class="data-img">
			       <image src="https://localelife.chunchuangkeji.cn/h5img/images/027.png" mode="widthFix"></image>
			     </view>
			   </view>
			   <view class="data-to">
			     至
			   </view>
			   <view class="data-end data-box flex justify-between align-center">
			     <view class="data-time text-333 text-sm">
			       {{end_data ? end_data : '结束日期'}}
			     </view>
			     <view class="data-img">
			       <image src="https://localelife.chunchuangkeji.cn/h5img/images/027.png" mode="widthFix"></image>
			     </view>
			   </view>
			 </view>
			 <view class="margin-left-24" @click="refund">重置</view>
		</view>
		 <view class="list" >
		   <view class="ongg" v-for="(item, index) in lists" :key="index" @click="handleJump" :data-url="`/pages/user/settle-detail/index?aid=${item.aid}`">
		 	  <view style="color: #EC008C;margin-bottom: 10rpx;">{{ item.create_time }}</view>
		     <view class="title-box">
		       <view class="title">收益金币：¥{{item.change_money || 0}}<text class="price"></text></view>
		       <view class="flex-shrink" style="color: #0081FF;">{{item.is_delete_txt}}</view>
		     </view>
		     <view class="info">
		       <view class="item">订单编号：{{item.order_no}}</view>
		       <view class="item">订单金额：<text class="text-price">{{item.order_money || 0}}</text></view>
		     </view>
		     <view class="riqiblls" style="color: #FB9217;">{{ item.remark }}</view>
		   </view>
		 </view>
	</block>
    <!-- 订单列表 end -->
    <!-- 日历弹框 start -->
    <fu-popup v-model="isShow" mode="center" :mask-close-able="true" @close="closePopup">
      <view class="calendar-box">
        <fu-calendar @change="change" active-bg-color="#EC5E29" range-bg-color="#f7d4d6" :future="true" start-text=" " end-text=" " mode="range" :isDefaultDay="false" :start-time="start_data" :end-time="end_data"></fu-calendar>
      </view>
    </fu-popup>
    <!-- 日历弹框 end -->
    <!-- 空布局 start -->
    <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
    <!-- 空布局 end -->
    <!-- 页面加载 start -->

    <!-- 页面加载 end -->
    <!-- 底部数据加载状态  start-->
    <uni-load-more v-if="lists.length > 8" :status="status"></uni-load-more>
    <!-- 底部数据加载状态  end-->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
// 定义顶部导航
import calendar from '@/common/mixin/calendar.js';
export default {
  mixins: [calendar],
  data() {
    return {
      isShowLoading: false, //是否显示页面初始化加载loading
      tabCurrentIndex: 0, //顶部导航 选择的第几个
      navList: [
        {
          state: 0,
          text: global.i18n['全部'],
          type: 'all'
        },
        {
          state: 1,
          text: '待结算',
          type: 0
        },
        {
          state: 2,
          text: '已结算',
          type: 1
        }
      ], //冻结顶部导航
      lists: [], //订单列表
      page: 1, //页码说
      size: 10, //一页显示几条数据
      status: 'more', //  加载状态  more:有更多数据  noMore:已加载全部数据  loading:数据加载中
      isInit: false, //是否已经初始化
      type: 'all', //请求的订单类别
      isShow: false, //日历弹框
      start_data: '', //开始日期
      end_data: '' ,//结束日期
      fromType: 0, //1 待结算
      pageName: '',
	  user_id: 0,
	  moneyInfo: {},
	  identity_type: 0,
	  recommends: 0
    };
  },
  onLoad(option) {
	this.user_id = option.user_id || 0
	this.identity_type = option.type ||0
	this.recommends = option.recommends || 0
    this.getOrderList(true);
  },
  /**
   * @description 获取订单列表
   */
  onShow() {
	  
  },
  onPullDownRefresh() {
    this.page = 1;
    this.status = 'more';
    this.getOrderList(false);
  },
  onReachBottom() {
    this.getOrderList();
  },
  methods: {
    tabClick(item, index) {
      this.tabCurrentIndex = index;
      this.type = item.type;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      this.refreshOrderList();
    },
	getDate() {
		this
	},

    /**
     * @description  显示日历
     */
    showCalendar() {
      this.isShow = true;
    },
    /**
     * @description  隐藏日历
     */
    closePopup() {
      this.isShow = false;
    },

    /**
     * @description  获取列表
     * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
     */
    change(value) {
      if (value.isInit) return;
      this.start_data = value.start;
      this.end_data = value.end;
      this.page = 1;
      this.status = 'more';
      setTimeout(() =>{
        this.isShow = false;
      },800)
      this.getOrderList(true);
    },
	refund() {
		this.start_data = ''
		this.end_data = ''
		this.page = 1;
		this.status = 'more';
		this.getOrderList(true);
	},
    getOrderList(value) {
      // this.isShow = false;
      if (this.status != 'more') return;
      this.status = 'loading';
      let data = {
        start_time: this.start_data,
        end_time: this.end_data,
        is_delete: this.type,
        page: this.page,
        list_rows: this.size,
		user_id: this.user_id
      };
      console.log('请求的数据', data);
      if (this.page == 1 && value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.post6440900c18fcb, data)
        .then(res => {
          console.log('积分明细', res);
          this.isShowLoading = false;
          if (res.data.code == 1) {
			  this.moneyInfo = res.data.data.total
            var curPageData = res.data.data.list.data;
            let total = res.data.data.list.total;
            if (this.page == 1) this.lists = [];
            this.lists = this.lists.concat(curPageData);
            if (this.lists.length < total) {
              this.status = 'more';
              this.page++;
            } else {
              this.status = 'noMore';
            }
          } else {
            this.$message.info(res.data.msg);
          }
          this.isInit = true;
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          this.isShowLoading = false;
          uni.stopPullDownRefresh();
        });
    },

    /**
     * @description  重置列表
     * @param {Object} value 页面是否初始化
     */
    refreshOrderList(value) {
      this.page = 1;
      this.status = 'more';
      if (value) {
        this.getOrderList(true);
      } else {
        this.getOrderList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
}
/deep/ .right{
    display: flex;
    align-items: center;
    .img{
      width: 36rpx;
      height: 36rpx;
    }
  }
.solid-bottom::after {
  z-index: 9999;
}
// 标题栏 start
.nav {
  position: sticky;
  z-index: 999;
  margin-bottom: 20upx;
  border-radius: 16rpx;
}
.nav .cu-item {
  position: relative;
  color:#999;
  font-size:28rpx;
  .active-line {
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 50rpx;
    height: 4rpx;
    background: $theme;
    opacity: 1;
    border-radius: 10rpx;
  }
}
.nav .cu-item.cur {
  color: $theme;
  font-weight: 500;
  border-bottom: 0 !important;
  .active-line {
    display: block;
  }
}

.nav .cu-item.cur::after {
  content: '';
  display: none;
}
// 标题栏 end
.list {
  
}
// 订单列表 start
.list .order-item:first-child {
  // margin-top:16rpx;
}
.order-item {
  display: flex;
  flex-direction: column;
  margin: 0 32rpx;
  justify-content:center;
  .i-top {
    display: flex;
    // height: 174rpx;
    font-size: 28rpx;
    color: #333333;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #eeeeee;
    .content {
      // height: 110rpx;
      width: 60%;

      .desc {
        font-size: 32rpx;
        font-family: PingFang-SC-Regular;
        color: #333333;
        margin-bottom: 24rpx;
      }
      .create_time {
        // position: absolute;
        // bottom: 0rpx;
        font-size: 24rpx;
        font-family: PingFang-SC-Regular;
        color: #bfbfbf;
      }
    }
  }
}

.ongg {
        // height: 132rpx;

        margin: 0 24rpx;
        // padding:0 32rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        padding: 24rpx;

        .title-box {
          display: flex;
          padding: 8rpx 0 16rpx;
          .title {
            flex: 1;
            font-size: 28rpx;
            font-weight: bold;
            .price {
              color: #EC5D29;
            }
          }
          .status {
            font-size: 28rpx;
            color: #FB9217;
          }
        }
        .info {
          padding: 8rpx 0;
          border-bottom: 1rpx solid #eee;
          .item {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 16rpx;
            .price {
              color: #EC5D29;
            }
          }
        }
        .riqiblls {
          margin-top: 24rpx;
          font-size: 24rpx;
          color: #999;
        }

        .price-right {
          padding-right: 10rpx;
          font-size: 32rpx;
          font-family: 'Oswald';
          font-weight: 400;

          opacity: 1;

          .add {
            color: #FB2A25;
          }

          .jian {
            color: #333333;
          }
        }
      }

// .i-top:last-child{
//    border-bottom: none;
// }

// 订单列表 end
// 日历弹框 start
.calendar-box {
  background: #ffffff;
  border-radius: 16rpx;
  width: 640rpx;
  padding: 0 24rpx;
  border: 1px solid transparent;
}
// 日历弹框 end

.data-wrap {
    padding: 32rpx 19rpx 40rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 11;

    .data-to {
      padding: 0 24rpx;
    }

    .data-box {
      width: 245rpx;
      height: 56rpx;
      border: 1px solid #bfbfbf;
      border-radius: 5rpx;
      padding: 0 20rpx;
      // box-sizing: border-box;

      .data-img {
        width: 30rpx;
        height: 30rpx;
        margin-top: -4rpx;

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
</style>
